<template>
  <div class="message-div">
    <template v-if="this.messageList!=null">
      <div v-for="(item,index) in messageList" :key="index" class="feed-element">
        <div class="media-body">
          <div
            class="media-body-title"
            :title="item.subject"
            @click="href(item.url)"
          >{{ item.subject }}</div>
          <small style="color:#cacaca;">
            {{ item.init_date }}
            <el-tag
              :type="item.status=== '完成'?'success':'warning'"
              style="float:right;"
              size="mini"
            >{{ item.status }}</el-tag>
          </small>
        </div>
      </div>
    </template>
    <div v-else class="media-body emtpyInfo">目前暂无您的流程安排</div>
  </div>
</template>
<script>
export default {
  props: {
    messageList: Array
  },
  data() {
    return {
      listLoading: true
    };
  },
  methods: {
    href(url) {
      window.open(this.BASE_ADDR + url);
    },
    handleClick(path) {
      this.$router.push({
        path: "/" + path
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.message-div {
  height: 660px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0 18px 0 0px;
  margin-right: -18px;
  cursor: pointer;
  .all-product-left-line {
    color: #0076d6;
    font-weight: 600;
  }
  .box-card-header {
    position: relative;
    height: 25px;
  }

  .media-body {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    padding: 10px 0px;
    border-bottom: 1px solid #e8e8e8;
    div {
height: 27px;
    line-height: 23px;
    }
    .media-body-title {
      width: 90%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .emtpyInfo {
    color: #666666;
    font-size: 12px;
    text-align: center;
  }
}
</style>
